<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue + CSS Animation Demo</title>
    <style>
        /* =======================
           1. 关键帧动画定义
        ======================= */

        /* 进入动画：放大 + 淡入 */
        @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 离开动画：缩小 + 淡出 */
        @keyframes fadeOutScale {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.5);
            }
        }

        /* 鼠标悬浮动画：彩色呼吸 */
        @keyframes breathingColor {
            0% { background: #ff4d4f; }
            33% { background: #40a9ff; }
            66% { background: #73d13d; }
            100% { background: #ff4d4f; }
        }

        /* =======================
           2. 动画类名定义
        ======================= */

        /* 显示时使用的动画 */
        .anim-enter {
            animation: fadeInScale 0.5s ease forwards;
        }

        /* 隐藏时使用的动画 */
        .anim-leave {
            animation: fadeOutScale 0.5s ease forwards;
        }

        /* 彩色呼吸无限循环动画 */
        .breathing {
            animation: breathingColor 2s linear infinite;
        }

        /* 盒子的基本样式 */
        .box {
            width: 150px;
            height: 150px;
            border-radius: 12px;
            background: #40a9ff;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
    </style>
</head>
<body>

<div id="app">

    <button @click="toggleBox">
        {{ show ? '隐藏 Box' : '显示 Box' }}
    </button>

    <button @click="togglePause" style="margin-left:10px">
        {{ paused ? '继续动画' : '暂停动画' }}
    </button>

    <br>

    <!-- 
        使用 v-if 控制创建/删除  
        使用动画类名切换 anim-enter / anim-leave
    -->
    <div v-if="show"
         class="box"
         :class="[
            isLeaving ? 'anim-leave' : 'anim-enter',
            paused ? '' : (hovering ? 'breathing' : '')
         ]"
         @mouseenter="hovering = true"
         @mouseleave="hovering = false"
         @animationend="animationEnd"
    >
        Box
    </div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
const app = Vue.createApp({
    data() {
        return {
            show: true,      // 控制显示隐藏
            isLeaving: false, // 是否正在播放离开动画
            hovering: false, // 鼠标是否悬停
            paused: false     // 是否暂停动画
        }
    },
    methods: {
        toggleBox() {
            if (this.show) {
                // 播放离开动画
                this.isLeaving = true
            } else {
                // 重新进入
                this.isLeaving = false
                this.show = true
            }
        },

        animationEnd() {
            // 离开动画结束后，从 DOM 删除
            if (this.isLeaving) {
                this.show = false
                this.isLeaving = false
            }
        },

        togglePause() {
            this.paused = !this.paused
            const boxes = document.querySelectorAll(".box")
            boxes.forEach(box => {
                box.style.animationPlayState = this.paused ? "paused" : "running"
            })
        }
    }
})

app.mount('#app')
</script>

</body>
</html>
